<template>
  <div class="app-container">
     <el-table :data="tableData"  border  style="width: 100%">
        <el-table-column  prop="index" label="序号" width="180"></el-table-column>
        <el-table-column prop="name" label="名称" width="180"> </el-table-column>
            <el-table-column prop="address" label="操作">
                  <template slot-scope="scope">
                  <el-button type="primary" round  @click="modifyTheserie(scope.row)"  >编辑</el-button>
                  <el-button type="danger" round @click="delserie(scope.row)">删除</el-button>
                  </template>
            </el-table-column>
      </el-table>
   

   <el-dialog title="修改" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="序号" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
   <el-form-item label="名称" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="determineserie">确 定</el-button>
  </div>
</el-dialog>

  </div>
</template>

<script>
import {listserie,delserie,updateserie} from '@/api/serie'
export default {
  data(){
    return{ 
       tableData: [],
       dialogFormVisible:false,
       form:{},
       formLabelWidth:'120px'
      }
  },
mounted(){
  //获取到分类
  listserie().then(res=>{
    console.log(res);
    //把获取到的值赋值给口数组
    this.tableData = res.data
  })
},
methods:{
delserie(obj){
  //点击删除的时候触发此方法
    this.$confirm('此操作为删除该分类, 是否继续?', '提示', { confirmButtonText: '确定',     cancelButtonText: '取消',
      type: 'warning'
        }).then(() => {
          //点击确定的时候执行
             delserie({id:obj._id}).then(res=>{
              //提示删除成功
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                                    });
                // console.log(res);
            listserie().then(res=>{
              // console.log(res);
              //重新获取数据渲染页面
              this.tableData = res.data
                      })
              })
// console.log(obj);
}).catch(() => {
        //点击取消的时候提示已取消删除
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        })
  },
  modifyTheserie(obj){
    //点击编辑的时候让编辑页面显示
        this.dialogFormVisible =true,
        this.form = obj
  },
determineserie(){
  updateserie({id:this.form._id,index:this.form.index,name:this.form.name}).then(res=>{
    //点击确定的时候让编辑页面隐藏
    this.dialogFormVisible  = false
    // 提示修改成功
    this.$message({ type: 'success',message: '修改成功!'  });
  })
},
cancel(){
  //点击取消的时候让编辑页面隐藏
       this.dialogFormVisible  = false
      listserie().then(res=>{ this.tableData = res.data  })
    }

}
}
</script>

<style>

</style>